﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<meta charset="utf-8" />
	<link href="../../../dist/css/ud2.css" rel="stylesheet" />
	<link href="../../src/test.css" rel="stylesheet" />
	<script src="../../../vendor/js/jquery.js"></script>
	<script src="../../../dist/js/ud2.js"></script>
</head>
<body>
	<h3>选项卡控件</h3>

	<fieldset>
		<legend>样式</legend>
		<div>
			<h5>默认</h5>
			<p>
				<div ud2="tabs">
					<div ud2-tabs-page ud2-tabs-page-title="网格控件" ud2-tabs-page-type="url">datagrid.html</div>
					<div ud2-tabs-page ud2-tabs-page-title="页码控件" ud2-tabs-page-type="url">page.html</div>
					<div ud2-tabs-page ud2-tabs-page-title="文本HTML" ud2-tabs-page-open="1" ud2-tabs-page-btn-close="0"><b>文本HTML</b></div>
				</div>
			</p>

			<hr class="hr" />

			<h5>清爽主题</h5>
			<p>
				<div ud2="tabs" ud2-tabs-menu="false" ud2-tabs-layout="2" ud2-tabs-theme="simple">
					<div ud2-tabs-page ud2-tabs-page-title="标题1" ud2-tabs-page-open="1" ud2-tabs-page-btn-close="0">内容1</div>
					<div ud2-tabs-page ud2-tabs-page-title="标题2" ud2-tabs-page-btn-close="0">内容2</div>
					<div ud2-tabs-page ud2-tabs-page-title="标题3" ud2-tabs-page-btn-close="0">内容3</div>
				</div>
			</p>

			<hr class="hr" />

			<h5>JS创建简洁的选项卡</h5>
			<p class="a"></p>
			<script>
				ud2.ready(function () {

					ud2.tabs({ menu: false }).appendTo('.a')
						.pageAdd(ud2.tabs.page("选项标题", "内容1"))
						.pageAdd(ud2.tabs.page("选项标题", "内容2"))
						.pageAdd(ud2.tabs.page("选项标题", "内容3"))
						.pageAdd(ud2.tabs.page("选项标题", "内容4"))
						.pageAdd(ud2.tabs.page("选项标题", "内容5"));

				});
			</script>
</div>
	</fieldset>


</body>
</html>
